import React from 'react'
import { View, Text, Image, StyleSheet, TouchableOpacity, FlatList } from 'react-native'
import { connect } from 'react-redux'
import { width, unitWidth, textSize18, textSize24 } from '../../../utils/AdapterUtil'
import * as Color from '../../../configs/Color'
import TitleBar from '../../../components/TitleBar'
import images from '../../../assets/images'


@connect(({ trade }) => ({ ...trade }))
class Trade extends React.PureComponent {

  static navigationOptions = {
    tabBarLabel: '交易',
    tabBarIcon: ({ focused, tintColor }) => (
      <Image
        style={[
          styles.icon,
          {
            tintColor: focused ? '#fff' : '#fff', //是否选择的时候图标的颜色
          }
        ]}
        source={images.tab.tab_trade}
      />
    ),

  }

  render() {
    const { navigation, coinsArray } = this.props
    return (
      <View style={styles.container}>
        <TitleBar
          title={''}
          titleHeight={0}
          navigation={navigation}
          hideLeftArrow
          backgroundColor='transparent'
        />
        <View style={styles.topContainer}>
          <View style={styles.topSpaceBetView}>
            <TouchableOpacity style={styles.topSpaceLeftView}>
              <Text style={{
                fontSize: 27 * unitWidth,
                fontFamily: 'Microsoft YaHei',
                fontWeight: '400',
                color: 'rgba(255,255,255,1)'
              }}>选择币种：</Text>
            </TouchableOpacity>

            <TouchableOpacity style={styles.topSpaceRightView}>
              <Text style={{
                fontSize: 26 * unitWidth,
                fontFamily: 'Microsoft YaHei',
                fontWeight: '400',
                color: 'rgba(255,255,255,1)'
              }}>订单记录</Text>
            </TouchableOpacity>
          </View>
          <View style={styles.topOtherView}>
            <FlatList
              horizontal={true}
              data={coinsArray}
              _keyExtractor={(item, index) => item.id}
              renderItem={this.renderItem}

            />
          </View>
        </View>
        <View style={styles.content}>
          <View style={{ height: unitWidth * 91, backgroundColor: 'transparent' }} />
          <View style={[styles.selectView, { backgroundColor: 'transparent', }]}>
            <View style={{ flex: 1 }}>
              <View style={{ flex: 1,flexDirection:'row',justifyContent:'space-between' }}>
                <TouchableOpacity>
                  <Text style={{color:'#0C9F8E',fontSize:unitWidth*40,borderBottomColor:'#0C9F8E',borderBottomWidth:unitWidth*3}}>购买</Text>
                </TouchableOpacity>
                <TouchableOpacity>
                  <Text style={{color:'#0C9F8E',fontSize:unitWidth*40}}>出售</Text>
                </TouchableOpacity>
              </View>
              <View style={{ flex: 1,justifyContent:'center' }} >
                <Text style={{color:'#0C9F8E',backgroundColor:'rgba(242,242,242,1)',borderRadius:unitWidth*18}} >全网最低价 一键买币</Text>
              </View>
            </View>
            <View style={{ flex: 1,alignItems:'flex-end' }}>
              <Text>XRP==2.33元</Text>
              <Text>XRP==2.33元</Text>
              <Text>XRP==2.33元</Text>
            </View>
          </View>
          <View style={{ height: unitWidth * 50, backgroundColor: 'transparent' }} />
          <View style={styles.cardView}>
            <View style={styles.cardSpaceView}></View>
          </View>
          <View style={styles.contentBottomView} />
        </View>
      </View >
    )
  }

  // 渲染水平方法币种
  renderItem = ({ item, index }) => {
    return (
      <TouchableOpacity
        key={'index' + index}
        style={{ marginLeft: 10 }}
      >
        <Text style={{ fontSize: 24, color: '#fff' }}>{item.text}</Text>
      </TouchableOpacity>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,

  },
  icon: {
    width: unitWidth * 39,
    height: unitWidth * 39,
  },
  tabBarLabel: {
    color: '#FFFFFF',
    fontFamily: 'FZLTCXHJW--GB1-0',
    fontSize: textSize24,
    fontStyle: 'normal',
    fontWeight: 'bold',
    textAlign: 'center'
  },
  //头部高度 ui高度308 - 状态栏的高度
  topContainer: {
    height: unitWidth * (308 - 40),
    backgroundColor: Color.themeColor
  },
  topSpaceBetView: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: unitWidth * 36, //两边的padding为36px
  },
  topSpaceLeftView: {
    // width: unitWidth * 132,
    height: unitWidth * 48, //web的行高为48  字体高度为25
    justifyContent: 'center'
  },
  topSpaceRightView: {
    flexDirection: 'row',
    //width: unitWidth * 132,
    height: unitWidth * 48, //web的行高为48  字体高度为25
    alignItems: 'center'
  },
  topOtherView: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center'
  },

  content: {
    flex: 1,
    paddingHorizontal: unitWidth * 96,
  },
  selectView: {
    flexDirection: 'row',
    width: width - 92,
    height: unitWidth * 122
  },
  cardView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: unitWidth * 6,
    backgroundColor: '#FCFCFC',
    borderColor: 'red',
    borderWidth: 1
  },
  cardSpaceView: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  cardSpaceLeftView: {

  },
  contentBottomView: {
    width: width - 92,
    height: 91 * unitWidth,
    backgroundColor: 'red'
  }
})
export default Trade